<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a="http://richfaces.org/a4j"
	xmlns:mtg="http://www.patelski.myself/jsf"
	xmlns:rich="http://richfaces.org/rich" template="layout/template.xhtml">

	<ui:define name="body">

		<h:form id="user" styleClass="edit" enctype="multipart/form-data">

			<rich:panel>
				<f:facet name="header">#{userHome.managed ? 'Edit' : 'Add'} User</f:facet>

				<rich:tabPanel style=" width : 100%; " switchType="client">
					<rich:tab id="personData" style="width: 100%; "
						label="Persoonsgegevens" styleClass="tab">

						<h:panelGrid columns="1" style="width: 100%; " cellpadding="2px"
							cellspacing="2px">
							<h:panelGrid columns="2"
								columnClasses="personContactData, personPicture"
								style=" width : 100%; " cellpadding="2px" cellspacing="2px">
								<rich:panel style="width : 100%; ">
									<f:facet name="header">
										<h:outputText rendered="#{not userHome.managed}" value="New"
											styleClass="header" />
										<h:outputText rendered="#{userHome.managed}"
											value="#{userHome.instance.firstName} #{userHome.instance.lastName}"
											styleClass="header" />
									</f:facet>
									<h:panelGrid columns="2" style="width : 100%; "
										cellpadding="2px" cellspacing="2px">

										<s:decorate id="usernameDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">User name</ui:define>
											<h:inputText id="firstName" required="true" size="20"
												maxlength="45" value="#{userHome.instance.username}">
												<a:support event="onblur" reRender="usernameDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>



										<s:decorate id="firstNameDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">First name</ui:define>
											<h:inputText id="firstName" required="false" size="20"
												maxlength="45" value="#{userHome.instance.firstName}">
												<a:support event="onblur" reRender="firstNameDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>

										<s:decorate id="lastNameDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Last name</ui:define>
											<h:inputText id="lastName" required="false" size="20"
												maxlength="45" value="#{userHome.instance.lastName}">
												<a:support event="onblur" reRender="lastNameDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>


										<s:decorate id="passwordDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Password</ui:define>
											<h:inputText id="password" required="false" size="20"
												maxlength="45" value="#{userHome.instance.password}">
												<a:support event="onblur" reRender="passwordDecoration"
													bypassUpdates="true" />
											</h:inputText>
										</s:decorate>
										<s:decorate id="pictureDecoration"
											template="layout/edit.xhtml">
											<ui:define name="label">Picture</ui:define>
											<s:fileUpload id="uploadPicture" styleClass="input-field"
												data="#{userHome.uploadPicture}" accept="image/*" size="40"
												maxlength="40" required="false" />
										</s:decorate>
									</h:panelGrid>
								</rich:panel>

								<rich:panel>
									<f:facet name="header">
										<h:outputText
											value="#{userHome.instance.firstName} #{userHome.instance.lastName}"
											styleClass="header" />
									</f:facet>
									<rich:panel>
										<mtg:photo src="#{userHome.instance.picture}" />
									</rich:panel>
								</rich:panel>
							</h:panelGrid>
						</h:panelGrid>
					</rich:tab>
				</rich:tabPanel>
			</rich:panel>
			<div class="actionButtons"><h:commandButton id="save"
				value="Save" action="#{userHome.persist}"
				disabled="#{!userHome.wired}" rendered="#{!userHome.managed}" /> <h:commandButton
				id="update" value="Save" action="#{userHome.update}"
				rendered="#{userHome.managed}" /> <h:commandButton id="delete"
				value="Delete" action="#{userHome.remove}"
				rendered="#{userHome.managed}" /> <s:button id="done" value="Done"
				propagation="end" view="/User.xhtml" rendered="#{userHome.managed}" />
			<s:button id="cancel" value="Cancel" propagation="end"
				view="/#{empty userFrom ? 'UserList' : userFrom}.xhtml"
				rendered="#{!userHome.managed}" /></div>
		</h:form>
	</ui:define>

</ui:composition>
